<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  src: string
  width?: number
  height?: number
}>()

const imgSrc = computed(() => {
  let src = props.src
  try {
    if (props.width! > 0 && props.height! > 0) {
      // 验证图片地址合法性
      new URL(src)
      src += `@${props.width}w_${props.height}h_1c`
    }
  } catch (e) {
    if (e instanceof Error) {
      console.error(e.message)
    } else {
      console.error(e)
    }
  }
  return src
})
</script>

<template>
  <img :src="imgSrc" loading="lazy" />
</template>

<style scoped lang="less">
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  &[src=''] {
    display: none;
  }
}
</style>
